<template>
  <el-dialog
    v-model="visible"
    title="退单备注"
    width="50%"
    :before-close="handleClose"
  >
    <el-form label-width="120px" ref="formRef" :model="formData" :rules="formRules">
      <el-form-item label="状态" prop="ygOrderStatusList">
        <el-select v-model="formData.ygOrderStatusList" placeholder="请选择支出类型" multiple>
          <el-option v-for="item in orderStatus" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="退单备注" prop="cancelMemo">
        <el-input
          v-model="formData.cancelMemo"
          type="textarea"
          :rows="15"
          placeholder="请输入内容"
        />
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>

      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import request from "@/config/axios";

const visible = ref(false);
const formData = ref({});
const formRef = ref();

const emit = defineEmits(["ok"])

const formRules = {
  ygOrderStatusList:[
    { required: true, message: '请选择状态', trigger: 'change',type: 'array'}
  ]
}

const orderStatus = [
  { label: 'AAA暂停(有群)', value: '暂停(有群)' },
  { label: 'BBB已取消', value: '已取消' },
  { label: 'CCC待换转移', value: '待换转移' },
  { label: 'DDD待关转移有群', value: '待关转移有群' },
  { label: 'EEE有群待解散', value: '有群待解散' },
  { label: 'FFF彩铃未关', value: '彩铃未关' },
  { label: '倪萍专用', value: '倪萍专用' },
  { label: '女生法院查询', value: '女生法院查询' },
  { label: '女生待换转移', value: '女生待换转移' },
  { label: '男女法院查询', value: '男女法院查询' },
  { label: '男生待换转移', value: '男生待换转移' },
  { label: '杨姗姗专用', value: '杨姗姗专用' },
]

const handleClose = () => {
  visible.value = false;
  formData.value = {};
};

const confirm = function(){
  console.log('---formData---', formData.value);
  formRef.value.validate((valid) => {
    console.log('---valid---', valid);
    if (!valid) {
      return
    }
    formData.value.ygOrderStatus = formData.value.ygOrderStatusList.join(',');
    request.post({ url: '/order/setCancelMemo', data: formData.value }).then(res => {
      ElMessage.success('保存成功');
      visible.value = false;
      emit('ok');

    });
  });
}

const open = function (rowData) {
  visible.value = true;

  formData.value = {...rowData}
  formData.value.ygOrderStatusList = formData.value.ygOrderStatus?.split(',') || [];
  console.log('---formData---',formData.value);
}

// 暴露方法给父组件
defineExpose({
  open
});
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
